<template>
	<view class="order-container">
		<view class="order-item">
			<view class="order-name">
				<view class="order-left">
					<view class="img-box">
						<image src="../../static/logo/logo.webp" class="image"></image>
					</view>
					<view class="name-box">
						<view class="name">梁师傅的红烧牛肉面</view>
						<view class="time">2021.05.01</view>
					</view>
				</view>
				<view class="state">待支付 </view>
			</view>
			<view class="card">
				<view class="">重庆小面 x1 </view>
				<view class="">重庆小面 x1 </view>
				<view class="">重庆小面 x1 <text class="total">共￥35</text> </view>
			</view>
			<view class="button-box">
				<u-button text="取消订单" @click="open" ></u-button>
				<u-button type="primary" text="进行支付" @click="toPay"></u-button>
			</view>
		</view>

<view class="order-item">
			<view class="order-name">
				<view class="order-left">
					<view class="img-box">
						<image src="../../static/logo/logo.webp" class="image"></image>
					</view>
					<view class="name-box">
						<view class="name">梁师傅的红烧牛肉面</view>
						<view class="time">2021.05.01</view>
					</view>
				</view>
				<view class="state">待支付 </view>
			</view>
			<view class="card">
				<view class="">重庆小面 x1 </view>
				<view class="">重庆小面 x1 </view>
				<view class="">重庆小面 x1 <text class="total">共￥35</text> </view>
			</view>
			<view class="button-box">
				<u-button text="取消订单" @click="open" ></u-button>
				<u-button type="primary" text="进行支付" @click="toPay"></u-button>
			</view>
		</view>
		
		<view class="order-item">
			<view class="order-name">
				<view class="order-left">
					<view class="img-box">
						<image src="../../static/logo/logo.webp" class="image"></image>
					</view>
					<view class="name-box">
						<view class="name">梁师傅的红烧牛肉面</view>
						<view class="time">2021.05.01</view>
					</view>
				</view>
				<view class="state">待支付 </view>
			</view>
			<view class="card">
				<view class="">重庆小面 x1 </view>
				<view class="">重庆小面 x1 </view>
				<view class="">重庆小面 x1 <text class="total">共￥35</text> </view>
			</view>
			<view class="button-box">
				<u-button text="取消订单" @click="open" ></u-button>
				<u-button type="primary" text="进行支付" @click="toPay"></u-button>
			</view>
		</view>
		
		<!-- 模态框 -->
		<u-modal :show="show" :title="title" showConfirmButton :showCancelButton="true" cancelText="放弃" @confirm="confirm" @cancel="cancel"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '确定要取消订单吗',
				show: false
			}
		},
		
		methods: {
			// 取消支付
			open() {
				this.show = true
			},
			// 确认取消
			confirm() {
				this.show = false
			},
			// 放弃支付
			cancel() {
				this.show = false
			},
			// 跳转支付
			toPay() {
				uni.navigateTo({
					url:'/subpkg/pay/pay'
				})
			}
		}
	}
</script>

<style lang="scss">
	.order-container {
		padding: 0 12px;

		.order-item {
			margin: 15px 0;
			background-color: white;
			padding: 10px;

			.order-name {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.order-left {
					display: flex;
					align-items: center;

					.img-box {
						width: 50px;
						height: 50px;
						overflow: hidden;
						border-radius: 10px;
						margin-right: 5px;

						.image {
							width: 100%;
							height: 100%;

						}
					}

					.name-box {
						.time {
							color: #9098A0;
							font-size: 12px;
						}
					}
				}
			}

			.card {
				margin: 15px 0;
				background-color: #F9F9F9;
				margin-left: 55px;
				padding: 10px;
			}

			.button-box {
				display: flex;
				justify-content: right;

				.u-button {
					width: 100px;
					margin: 0;
					margin-left: 10px;

				}
			}
		}
	}
</style>
